<template>
    <!-- #ifdef H5 -->
    <thead class="uni-table-thead">
        <tr class="uni-table-tr">
            <th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
                <table-checkbox
                    :indeterminate="indeterminate"
                    :checked="checked"
                    @checkbox-selected="checkboxSelected"
                ></table-checkbox>
            </th>
        </tr>
        <slot></slot>
    </thead>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="uni-table-thead">
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
import tableCheckbox from "../uni-tr/table-checkbox.vue";
export default {
    name: "UniThead",
    components: {
        tableCheckbox
    },
    options: {
        // #ifdef MP-TOUTIAO
        virtualHost: false,
        // #endif
        // #ifndef MP-TOUTIAO
        virtualHost: true
        // #endif
    },
    data() {
        return {
            border: false,
            selection: false,
            rowspan: 1,
            indeterminate: false,
            checked: false
        };
    },
    created() {
        this.root = this.getTable();
        // #ifdef H5
        this.root.theadChildren = this;
        // #endif
        this.border = this.root.border;
        this.selection = this.root.type;
    },
    methods: {
        init(self) {
            this.rowspan++;
        },
        checkboxSelected(e) {
            this.indeterminate = false;
            const backIndexData = this.root.backIndexData;
            const data = this.root.trChildren.filter((v) => !v.disabled && v.keyValue);
            if (backIndexData.length === data.length) {
                this.checked = false;
                this.root.clearSelection();
            } else {
                this.checked = true;
                this.root.selectionAll();
            }
        },
        /**
         * 获取父元素实例
         */
        getTable(name = "uniTable") {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== name) {
                parent = parent.$parent;
                if (!parent) return false;
                parentName = parent.$options.name;
            }
            return parent;
        }
    }
};
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-thead {
    display: table-header-group;
}

.uni-table-tr {
    /* #ifndef APP-NVUE */
    display: table-row;
    transition: all 0.3s;
    box-sizing: border-box;
    /* #endif */
    border: 1px red solid;
    background-color: #fafafa;
}

.checkbox {
    padding: 0 8px;
    width: 26px;
    padding-left: 12px;
    /* #ifndef APP-NVUE */
    display: table-cell;
    vertical-align: middle;
    /* #endif */
    color: #333;
    font-weight: 500;
    border-bottom: 1px $border-color solid;
    font-size: 14px;
    // text-align: center;
}

.tr-table--border {
    border-right: 1px $border-color solid;
}

/* #ifndef APP-NVUE */
.uni-table-tr {
    ::v-deep .uni-table-th {
        &.table--border:last-child {
            // border-right: none;
        }
    }

    ::v-deep .uni-table-td {
        &.table--border:last-child {
            // border-right: none;
        }
    }
}

/* #endif */
</style>
